<template>
  <div style="display: flex; flex-flow: column;">
    <!--生成一个表单，包含上传两张图片-->
    <el-form :model="form" label-width="240px" style="flex: 1;margin: auto;">
      <el-form-item required label="banner 广告图">
        <el-upload ref="bannerRef" class="avatar-uploader" action="/api/platform/file/upload/image"
          :with-credentials="true" :headers="{ token: getToken().token }" :on-exceed="bannerHandleExceed"
          :show-file-list="false" :auto-upload="false" @success="uploadBannerSuccess" @change="submitBanner">
          <img v-if="form.imageUrl" :src="form.imageUrl" class="banner-img" />
          <el-icon v-else class="banner-img-icon">
            <Plus />
          </el-icon>
          <template #tip>
            <div class="el-upload__tip" style="color: #f56c6c;">
              690*260px，仅限 .jpg 或 .png 格式，不超过2m
            </div>
          </template>
        </el-upload>
      </el-form-item>
      <el-form-item required label="老师二维码">
        <el-upload ref="codeRef" class="avatar-uploader" action="/api/platform/file/upload/image"
          :with-credentials="true" :headers="{ token: getToken().token }" :on-exceed="codeHandleExceed"
          :show-file-list="false" :auto-upload="false" @success="uploadCodeSuccess" @change="submitCode">
          <img v-if="form.qrCodeUrl" :src="form.qrCodeUrl" class="teacher-img" />
          <el-icon v-else class="teacher-img-icon">
            <Plus />
          </el-icon>
          <template #tip>
            <div class="el-upload__tip" style="color: #f56c6c;">
              690*260px，仅限 .jpg 或 .png 格式，不超过2m
            </div>
          </template>
        </el-upload>
      </el-form-item>
    </el-form>
    <div class="btns" style="display: flex; justify-content: center;">
      <el-button type="primary" @click="onSubmit" v-if="hasPerms('banner:save')">保存</el-button>
      <el-button @click="clearBannerConfig">清空</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getBannerConfig, setBannerConfig } from '@/api/banner';
import { getToken, hasPerms } from '@/utils/auth';
import { Plus } from '@element-plus/icons-vue'
import { ElMessage, genFileId, UploadInstance, UploadProps, UploadRawFile } from 'element-plus';
import { onMounted } from 'vue';
import { reactive, ref } from 'vue';

defineOptions({
  // name 作为一种规范最好必须写上并且和路由的name保持一致
  name: "BannerManage"
});

// 表单数据
const form = reactive({
  imageUrl: '',
  qrCodeUrl: '',
})
const bannerRef = ref<UploadInstance>()
// 覆盖前一个文件
const bannerHandleExceed: UploadProps['onExceed'] = (files) => {
  bannerRef.value!.clearFiles()
  const file = files[0] as UploadRawFile
  file.uid = genFileId()
  bannerRef.value!.handleStart(file)
}
const submitBanner = () => {
  bannerRef.value!.submit()
}
// banner上传成功
const uploadBannerSuccess = (response: any) => {
  form.imageUrl = response.data
}

const codeRef = ref<UploadInstance>()
const codeHandleExceed: UploadProps['onExceed'] = (files) => {
  codeRef.value!.clearFiles()
  const file = files[0] as UploadRawFile
  file.uid = genFileId()
  codeRef.value!.handleStart(file)
}
const submitCode = () => {
  codeRef.value!.submit()
}
// 二维码上传成功
const uploadCodeSuccess = (response: any) => {
  form.qrCodeUrl = response.data
}
const onSubmit = () => {
  if (!form.imageUrl || !form.qrCodeUrl) {
    ElMessage({
      message: '请上传图片和二维码',
      type: 'warning',
    })
    return
  }
  setBannerConfig(form).then(() => {
    ElMessage({
      message: '设置成功',
      type: 'success',
    })
  })
}

// 获取banner配置
const queryBannerConfig = () => {
  getBannerConfig().then((res) => {
    form.imageUrl = res.data.imageUrl
    form.qrCodeUrl = res.data.qrCodeUrl
  })
}

// 清空配置
const clearBannerConfig = () => {
  form.imageUrl = ''
  form.qrCodeUrl = ''
}

onMounted(() => {
  queryBannerConfig()
})

</script>
<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.teacher-img-icon {
  font-size: 28px;
  color: #8c939d;
  width: 650px;
  height: 650px;
  text-align: center;
}

.el-icon.banner-img-icon {
  font-size: 28px;
  color: #8c939d;
  width: 650px;
  height: 260px;
  text-align: center;
}

.banner-img {
  width: 650px;
  height: 260px;
}

.teacher-img {
  width: 690px;
  height: 260px;
}
</style>